<template>
  <div class="opw-all">
    <ul class="opw-title">
      <li>站名</li>
      <li>油罐</li>
      <li>油品</li>
      <li>剩余油量(升)</li>
    </ul>
    <div class="opw-body" ref="opw_body">
      <ul class="opw-body-ul" v-for="(item,index) in state.list" :key="index" ref="opw_ul">
        <li>{{ item.站名 }}</li>
        <li>{{ item.罐号 }}</li>
        <li>{{ item.油品名称 }}</li>
        <li>{{ item['剩余油量(升)'] }}</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, nextTick, reactive, ref} from 'vue';
import {opwRealTimeData} from '@/api/dataScreen';
import {round} from "number-precision";

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;
      opw_height = 0 as any;
      ul_height = 0 as any;
      timer = null as any;
      index = 0 as any;
    });

    const opw_body = ref();
    const opw_ul = ref();

    async function getData(stationCode: number) {
      state.list = await opwRealTimeData(stationCode || -1);
      if (state.list && state.list[0]) {
        await nextTick(() => {
          dealData();
        });
      }
    }

    function dealData() {
      // console.log('body', opw_body.value.getBoundingClientRect().height);
      // console.log('ul', opw_ul.value.getBoundingClientRect().height);
      // console.log(opw_body.value.getBoundingClientRect().height / opw_ul.value.getBoundingClientRect().height,state.list.length);
      state.opw_height = round(document.querySelector('.opw-body').getBoundingClientRect().height, 2);
      state.ul_height = round(state.list.length * document.querySelectorAll('.opw-body-ul')[0]
        .getBoundingClientRect().height + state.list.length * 10, 2);
      // console.log('ul_height', state.ul_height);
      opwTiming();
    }

    function opwTiming() {
      clearInterval(state.timer);
      const el: HTMLDivElement[] = document.querySelectorAll(".opw-body-ul") as any;
      if (!state.list || state.list.length <= 6) {
        state.index = 0;
        for (let item of el) {
          item.style.bottom = 0 + 'px';
        }
        return;
      }
      state.timer = setInterval(() => {
        state.index++;
        for (let item of el) {
          if (state.index >= state.ul_height) {
            // console.log(state.index);
            state.index = -state.ul_height/1.5;
          } else {
            item.style.bottom = state.index + 'px';
          }
        }
      }, 50)
    }

    // watch(() => props.stationCode, () => {
    //     getData();
    // })


    return {
      state,
      getData,
      opw_body,
      opw_ul
    }
  }
});
</script>

<style scoped>
.opw-all {
  height: 80%;
  width: 100%;
  margin: 0 auto;
  padding-top: 1%;
  margin-top: 1%;
}

.opw-title {
  list-style-type: none;
  color: rgba(245, 245, 245, 0.8);
  height: 13%;
  line-height: 1.875rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgb(20, 126, 171) inset, 0 0.0625rem 0.125rem 0 rgb(20, 126, 171);
  margin: 0;
  padding: 0;
  font-size: 0.65rem;
  /*margin-left: 2.5%;*/
}

.opw-title li {
  float: left;
  width: 25%;
  text-align: center;
}

.opw-body {
  height: 85%;
  width: 100%;
  /*margin-left: 2.5%;*/
  overflow: hidden;
}

.opw-body-ul {
  list-style-type: none;
  height: 10%;
  /*line-height: 1.6rem;*/
  width: 100%;
  margin: 0;
  padding: 0;
  clear: both;
  /*margin-top: 1.6rem;*/
  position: relative;
}

.opw-body-ul li {
  float: left;
  width: 25%;
  text-align: center;
  font-size: 0.65rem;
  color: rgba(245, 245, 245, 0.5);
}
</style>
